<script setup>

import {reactive, ref} from "vue";
  import {Search} from "@element-plus/icons-vue";
  const key = ref('')
  const data = reactive({
    tableData: [
      {
        data: "2022-04-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      },
      {
        data: "2022-04-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      },
      {
        data: "2022-04-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      }


      ],
    currentPage: 1,
    pageSize: 10,
    total: 1000


  })
</script>

<template>
  <div>
    <div class="card" style="margin-bottom:5px">
      <el-input style="width: 240px;margin-right: 5px;" placeholder="根据关键字搜索" v-model="key" :suffix-icon="Search" >
      </el-input>
      <el-button type="primary">搜索</el-button>
      <el-button type="warning">重置</el-button>
    </div>
    <div class="card" style="margin-bottom:5px">
      <el-button type="primary">新增</el-button>
      <el-button type="danger">批量删除</el-button>
      <el-button type="info">导入</el-button>
      <el-button type="success">导出</el-button>
    </div>
    <div class="card" style="margin-bottom:5px">
      <el-table :data="data.tableData" stripe>
        <el-table-column label="日期" prop="data"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
      </el-table>

  </div>
    <div class="card">
      <el-pagination
        v-model:current-page="data.currentPage"
        v-model:page-size="data.pageSize"
        :page-sizes="[5,10,15,20]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>

</style>
